<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
  <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
  <title>小兔鲜儿-新鲜、惠民、快捷！</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 按顺序引入：外链样式表后写的生效 -->
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 快捷导航栏 -->
  <div class="shortcut">
    <div class="wrapper">
      <ul>
        <li><a href="javascript:;">请先登录</a></li>
        <li><a href="javascript:;">免费注册</a></li>
        <li><a href="javascript:;">我的订单</a></li>
        <li><a href="javascript:;">会员中心</a></li>
        <li><a href="javascript:;">帮助中心</a></li>
        <li><a href="javascript:;">在线客服</a></li>
        <li><a href="javascript:;"><span></span>手机版</a></li>
      </ul>
    </div>
  </div>


  <!-- 头部 -->
  <div class="header wrapper">
    <div class="logo">
      <h1><a href="JavaScript:;">小兔鲜儿</a></h1>
    </div>
    <div class="nav">
      <ul>
        <li><a href="JavaScript:;">首页</a></li>
        <li><a href="JavaScript:;">生鲜</a></li>
        <li><a href="JavaScript:;">电器</a></li>
        <li><a href="JavaScript:;">居家</a></li>
        <li><a href="JavaScript:;">洗护</a></li>
        <li><a href="JavaScript:;">孕婴</a></li>
        <li><a href="JavaScript:;">服饰</a></li>
        <li><a href="JavaScript:;">餐厨</a></li>
      </ul>
    </div>
    <div class="search"><input type="text" placeholder="搜一搜">
      <!-- 定位放大镜 -->
      <span></span>
    </div>
    <div class="car"></div>
    </h6>
  </div>


  <!-- banner -->
  <div class="banner">
    <div class="wrapper">
      <!-- 有多少图片就有多少个li -->
      <ul>

      </ul>
      <!-- 侧导航 -->
      <div class="aside">
        <ul>
          <li><a href="JavaScript:;">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="JavaScript:;">美食<span>面点 干果</span></a></li>
          <li><a href="JavaScript:;">餐厨<span>数码产品</span></a></li>
          <li><a href="JavaScript:;">电器<span>床品 四件套 被枕</span></a></li>
          <li><a href="JavaScript:;">居家<span>奶粉 玩具 辅食</span></a></li>
          <li><a href="JavaScript:;">洗护<span>洗发 洗护 美妆</span></a></li>
          <li><a href="JavaScript:;">孕婴<span>奶粉 玩具</span></a></li>
          <li><a href="JavaScript:;">服饰<span>女装 男装</span></a></li>
          <li><a href="JavaScript:;">杂货<span>户外 图书</span></a></li>
          <li><a href="JavaScript:;">品牌<span>品牌制造</span></a></li>
        </ul>
      </div>
      <!-- 小箭头 -->
      <!-- prev:上一个 -->
      <a href="JavaScript:;" class="prev"></a>
      <!-- next：下一个 -->
      <a href="JavaScript:;" class="next"></a>
      <!-- 圆点: 当前状态 current / active -->
      <ol>
        <li></li>
        <li></li>
        <li class="current"></li>
        <li></li>
        <li></li>
      </ol>
    </div>
  </div>
  <!-- 新鲜好物 -->
  <div class="goods wrapper">
    <!-- hd 头部 -->
    <div class="hd">
      <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
      <a href="JavaScript:;">查看全部</a>
    </div>
    <!-- body 内容 -->
    <div class="bd clearfix">
      <ul>
        <li>
          <a href="JavaScript:;">
            <img src="./uploads/new_goods_1.jpg" alt="">
            <h3>睿米无序吸尘器</h3>
            <div>￥<span>899</span></div>
            <b>新品</b>
          </a>
        </li>
        <li>
          <a href="JavaScript:;">
            <img src="./uploads/new_goods_2.jpg" alt="">
            <h3>智能环绕3D空调</h3>
            <div>￥<span>1299</span></div>
            <b>新品</b>
          </a>
        </li>
        <li>
          <a href="JavaScript:;">
            <img src="./uploads/new_goods_3.jpg" alt="">
            <h3>广东软软糯米饭</h3>
            <div>￥<span>129</span></div>
            <b>新品</b>
          </a>
        </li>
        <li>
          <a href="JavaScript:;">
            <img src="./uploads/new_goods_4.jpg" alt="">
            <h3>罗西机械智能手表</h3>
            <div>￥<span>3399</span></div>
            <b>新品</b>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 人气推荐 -->
  <div class="pupular wrapper">
    <div class="hd1">
      <h2>人气推荐<span>人品爆款 不容错过</span></h2>
    </div>
    <div class="bd1 clearfix">
      <ul>
        <li>
          <a href="JavaScript:;">
            <img src="./uploads/popular_1.jpg" alt="">
            <div>
              <h3>特惠推荐</h3>
              <p>我猜得到 你的需要</p>
            </div>
          </a>
        </li>
        <li>
          <a href="JavaScript:;">
            <img src="./uploads/popular_2.jpg" alt="">
            <div>
              <h3>爆款推荐</h3>
              <p>人气好物推荐</p>
            </div>
          </a>
        </li>
        <li>
          <a href="JavaScript:;">
            <img src="./uploads/popular_3.jpg" alt="">
            <div>
              <h3>场景使用一站购买</h3>
              <p>编辑精心整理推荐</p>
            </div>
          </a>
        </li>
        <li>
          <a href="JavaScript:;">
            <img src="./uploads/popular_4.jpg" alt="">
            <div>
              <h3>领劵中心</h3>
              <p>发现超多优惠券</p>
            </div>
          </a>
        </li>
      </ul>

    </div>
  </div>

  <!-- 热门品牌 -->
  <div class="brand_goods">
    <div class="wrapper">
      <div class="bg_hd">
        <h2>热门品牌<span>国际经典 品质保证</span></h2>
        <div>
          <a href="JavaScript:;">&lt</a>
          <a href="JavaScript:;">&gt</a>
        </div>
      </div>
      <div class="bg_bd">
        <ul>
          <li>
            <a href="JavaScript:;"><img src="./uploads/brand_goods_1.jpg" alt=""></a>
          </li>
          <li>
            <a href="JavaScript:;"><img src="./uploads/brand_goods_2.jpg" alt=""></a>
          </li>
          <li>
            <a href="JavaScript:;"><img src="./uploads/brand_goods_3.jpg" alt=""></a>
          </li>
          <li>
            <a href="JavaScript:;"><img src="./uploads/brand_goods_4.jpg" alt=""></a>
          </li>
          <li>
            <a href="JavaScript:;"><img src="./uploads/brand_goods_5.jpg" alt=""></a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 生鲜区域 -->
  <div class="fresh wrapper">
    <div class="fresh_hd">
      <h2>生鲜</h2>
      <a href="JavaScript:;" class="more">查看全部</a>
      <ul>
        <li><a href="JavaScript:;">水果</a></li>
        <li><a href="JavaScript:;">蔬菜</a></li>
        <li><a href="JavaScript:;">肉禽蛋</a></li>
        <li><a href="JavaScript:;">裤装</a></li>
        <li><a href="JavaScript:;">衬衫</a></li>
        <li><a href="JavaScript:;">T恤</a></li>
        <li><a href="JavaScript:;">内衣</a></li>
      </ul>
    </div>
    <div class="fresh_bd clearfix">
      <div class="left">
        <a href="JavaScript:;"><img src="./uploads/fresh_goods_cover.png" alt=""></a>
      </div>
      <div class="right">
        <div class="product">
          <a href="JavaScript:;">
            <img src="./uploads/fresh_goods_1.jpg" alt="">
            <div class="biaoti">
              <span>美威 智利原味三文鱼排</span><br>
              <span> 240/袋 4片装</span><br>
              <span>海鲜年货</span><br>
              <h4 class="price">￥59</h4>
            </div>
          </a>
        </div>
        <div class="product">
          <a href="JavaScript:;">
            <img src="./uploads/fresh_goods_2.jpg" alt="">
            <div class="biaoti">
              <span>美威 智利原味三文鱼排</span><br>
              <span> 240/袋 4片装</span><br>
              <span>海鲜年货</span><br>
              <h4 class="price">￥59</h4>
            </div>
          </a>
        </div>
        <div class="product">
          <a href="JavaScript:;">
            <img src="./uploads/fresh_goods_3.jpg" alt="">
            <div class="biaoti">
              <span>美威 智利原味三文鱼排</span><br>
              <span> 240/袋 4片装</span><br>
              <span>海鲜年货</span><br>
              <h4 class="price">￥59</h4>
            </div>
          </a>
        </div>
        <div class="product">
          <a href="JavaScript:;">
            <img src="./uploads/fresh_goods_4.jpg" alt="">
            <div class="biaoti">
              <span>美威 智利原味三文鱼排</span><br>
              <span> 240/袋 4片装</span><br>
              <span>海鲜年货</span><br>
              <h4 class="price">￥59</h4>
            </div>
          </a>
        </div>
        <div class="product">
          <a href="JavaScript:;">
            <img src="./uploads/fresh_goods_5.jpg" alt="">
            <div class="biaoti">
              <span>美威 智利原味三文鱼排</span><br>
              <span> 240/袋 4片装</span><br>
              <span>海鲜年货</span><br>
              <h4 class="price">￥59</h4>
            </div>
          </a>
        </div>
        <div class="product">
          <a href="JavaScript:;">
            <img src="./uploads/fresh_goods_6.jpg" alt="">
            <div class="biaoti">
              <span>美威 智利原味三文鱼排</span><br>
              <span> 240/袋 4片装</span><br>
              <span>海鲜年货</span><br>
              <h4 class="price">￥59</h4>
            </div>
          </a>
        </div>
        <div class="product">
          <a href="JavaScript:;">
            <img src="./uploads/fresh_goods_7.jpg" alt="">
            <div class="biaoti">
              <span>美威 智利原味三文鱼排</span><br>
              <span> 240/袋 4片装</span><br>
              <span>海鲜年货</span><br>
              <h4 class="price">￥59</h4>
            </div>
          </a>
        </div>
        <div class="product">
          <a href="JavaScript:;">
            <img src="./uploads/fresh_goods_8.jpg" alt="">
            <div class="biaoti">
              <span>美威 智利原味三文鱼排</span><br>
              <span> 240/袋 4片装</span><br>
              <span>海鲜年货</span><br>
              <h4 class="price">￥59</h4>
            </div>
          </a>
        </div>
      </div>
    </div>

  </div>

  <!-- 版权区域 -->
  <div class="footer">
    <div class="wrapper">
      <div class="top">
        <ul>
          <li>
            <!-- 通过伪元素添加标签实现精灵图 -->
            <span>价格亲民</span>
          </li>
          <li>
            <span>物流便捷</span>
          </li>
          <li>
            <span>品质新鲜</span>
          </li>
        </ul>
      </div>
      <div class="bottom">
        <p>
          <a href="JavaScript:;">关于我们</a>|
          <a href="JavaScript:;">帮助中心</a>|
          <a href="JavaScript:;">售后服务</a>|
          <a href="JavaScript:;">配送与验收</a>|
          <a href="JavaScript:;">商务合作</a>|
          <a href="JavaScript:;">搜索推荐</a>|
          <a href="JavaScript:;">友情链接</a>
        </p>
        <p>CopyRight@小兔鲜儿</p>

      </div>
    </div>
  </div>
</body>

</html>